.dots {
    .outside-dots & {
        > .dot {
            background-color: $dots-outside-color;

            &:hover {
                background-color: $dots-outside-color-hover;
            }
            &.active {
                background-color: $dots-outside-color-active;
            }
        }
    }
}
// dots horizontal
.horizontal-dots {
    .dots {
        display: block;
    }
    &.outside-navs {
        &.outside-dots {
            .dots {
                // responsive
                @media(max-width: 359px) {
                    padding-left: 18px;
                    padding-right: 18px;
                }
                @media(min-width: 360px) and (max-width: 767.9px) {
                    padding-left: 20px;
                    padding-right: 20px;
                }
                @media(min-width: 768px) and (max-width: 991.9px) {
                    padding-left: 30px;
                    padding-right: 30px;
                }
                @media(min-width: 992px) and (max-width: 1199.9px) {
                    padding-left: 35px;
                    padding-right: 35px;
                }
                @media(min-width: 1200px) {
                    padding-left: 40px;
                    padding-right: 40px;
                }
            }
        }
    }
}
